<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>

  <style>
    .son {
      display: flex;
      justify-content: flex-start;
    }

    .son-left {
      background-color: red;
    }

    .son-right {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">

  /**
   * 使用特殊的props.children 可以渲染以某个组件作为父组件 而传入的子组件
   * 这使得别的组件可以通过jsx 嵌套 将任意组件作为子组件传递给他们
   */

  function ParentsCpn(props) {
    return (
      <div className={'color-' + props.color}>
        {props.children}
      </div>
    )
  }
  const ele = (
    <ParentsCpn color='red'>
      <div className='title'>
        <p>Hello</p>
      </div>
      <div className='content'>
        <p>缘来是你</p>
      </div>
    </ParentsCpn>
  )

  /**
   * 上面<ParentsCpn /> 组件JSX 标签中的所有内容 都会作为一个 children prop 传递给 <ParentsCpn /> 组件
   * 因为<ParentsCpn /> 组件将{props.children} 渲染在一个div 中
   * 被传递的这些子组件最终都会出现在输出结果中
   */

  /**
   * 但有些情况下 我们希望给某个组件留下几个‘洞’ 
   * 在这种情况下 我们不能在使用props.children 
   * 而是统一的自行约定 将所需内容传入props 并使用相应的props 
   * 上面是官方给的 我自己这样理解
   * 你自己封装的组件可以留出空间 这个空间是用来渲染传入的子组件的 但是必须以你传入的props 来渲染
   */

  function SplitPane(props) {
    return (
      <div>
        <p>这里是作为父组件的拆分版</p>
        <div className='son'>
          <div className='son-left'>
            {props.left}
          </div>
          <div className='son-right'>
            {props.right}
          </div>
        </div>
      </div>
    )
  }

  function Left(props) {
    return (
      <div>看看这里是不是左边</div>
    )
  }
  function Right(props) {
    return (
      <div>看看这里是不是右边</div>
    )
  }

  const ele2 = <SplitPane left={<Left />} right={<Right />} />
  /**
   * 这里就是将一个组件以props 的形式传递给另一个组件 而那个组件将作为父组件去渲染传递进来的子组件
   * 这里值得注意的是 这些子组件都是以参数props 的形式传递进去的 父组件也是以参数的形式去渲染的
   * 在React 中你可以将任何东西作为props 进行传递 它并没有‘槽’(slot)的概念
   */


  // 组合  这对于复用有非常大的帮助
  function Dialog(props) {
    return (
      <ParentsCpn>
        <h1>
          {props.title}
        </h1>
        <p>
          {props.content}
        </p>
        {props.children}
      </ParentsCpn>
    )
  }

  class SingUp extends React.Component {
    constructor(props) {
      super(props)
      this.state = { login: '' }
    }

    handleClick() {
      alert('您的登录昵称为:' + this.state.login)
    }

    handleChange(event) {
      this.setState({
        login: event.target.value
      })
    }

    render() {
      return (
        <Dialog title='Mars Exploration Program' content='How should we refer to you?'>
          <input type="text" value={this.state.login} onChange={(e) => this.handleChange(e)} />
          <button onClick={() => this.handleClick()}>Sing Me up</button>
        </Dialog>
      )
    }
  }
  ReactDOM.render(<SingUp />, document.getElementById('root'))

</script>